<template>
  <div class="head-tool">
    <el-menu
      mode="horizontal"
      text-color="#fff"
      class="toolMenu"
      background-color="transparent"
    >
      <el-menu-item index="1">
        <div class="item">
          <el-avatar size="small" src=""></el-avatar>
          <span class="username">{{ username }}</span>
          <meCardVue></meCardVue
          ><!--账号信息卡片-->
        </div>
      </el-menu-item>
      <el-menu-item index="2" class="before">
        <el-tooltip
          content="首页"
          placement="bottom"
          :enterable="false"
          effect="light"
          offset="5"
        >
          <i class="el-icon-s-home"></i>
        </el-tooltip>
      </el-menu-item>
      <el-menu-item class="item before">
        <el-tooltip
          content="菜单"
          placement="bottom"
          :enterable="false"
          effect="light"
          offset="5"
        >
          <i class="el-icon-s-grid"></i>
        </el-tooltip>
        <menuCardVue></menuCardVue
        ><!--常用菜单卡片-->
      </el-menu-item>
      <el-menu-item class="item before">
        <el-badge is-dot style="top: 14px" class="notice-item">
          <el-tooltip
            content="订单"
            placement="bottom"
            effect="light"
            :enterable="false"
            offset="5"
          >
            <i class="el-icon-bell" style="position: relative; top: -16px"></i>
          </el-tooltip>
        </el-badge>
        <orderCardVue></orderCardVue
        ><!--订单卡片-->
      </el-menu-item>
      <el-menu-item class="item before">
        <el-tooltip
          content="主题更换"
          placement="bottom"
          effect="light"
          :enterable="false"
          offset="5"
        >
          <i class="el-icon-magic-stick"></i>
        </el-tooltip>

        <el-card
          class="box-card clear"
          style="right: -100px; padding-bottom: 15px"
        >
          <span
            class="span"
            v-for="(color, index) in backColor"
            :key="index"
            :style="{ 'background-color': color }"
            @click.prevent="editBack(color)"
          ></span>
        </el-card>
      </el-menu-item>
      <el-menu-item class="before">
        <el-tooltip
          content="退出系统"
          placement="bottom"
          :enterable="false"
          effect="light"
          offset="5"
        >
          <i class="el-icon-switch-button" @click="quit"></i>
        </el-tooltip>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
import meCardVue from "./toolCard/meCard.vue";
import menuCardVue from "./toolCard/menuCard.vue";
import orderCardVue from "./toolCard/orderCard.vue";
import { mapMutations, mapState } from "vuex";
export default {
  data() {
    return {
      backColor: [
        "rgb(26, 188, 156)",
        "#3498db",
        "#ed6e4d",
        "#fabb3d",
        "#aa7ab3",
        "#9ad0b9",
        "#ea94be",
        "#c1374a",
      ], //主题颜色
    };
  },
  components: {
    meCardVue,
    menuCardVue,
    orderCardVue,
  },
  methods: {
    ...mapMutations("userStore", ["quitSys"]),
    editBack(color) {
      this.$emit("editBack", color);
    },
    quit() {
      this.$confirm("确让要退出登录吗？", "提示", {
        type: "error",
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      }).then(() => {
        this["quitSys"]();
      });
    },
  },
  computed: {
    ...mapState("userStore", ["username"]),
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/sass/barCard/card.scss";

.tool-img {
  width: 10px;
  height: 21px;
}
.toolMenu {
  background-color: transparent;
}
.head-tool {
  float: right;
  padding-right: 50px;
  & .username {
    font-size: 10px;
    color: #fff;
    padding-left: 10px;
  }
  & .el-icon-s-home {
    color: #fff;
    font-size: 25px;
  }
  & ::v-deep li {
    height: 50px;
    line-height: 50px;
  }
  & .toolMenu ::v-deep i {
    color: #fff;
    font-size: 22px;
  }
  & .toolMenu ::v-deep li:hover {
    background-color: transparent !important;
  }
}

.item:hover ::v-deep .box-card {
  display: block;
}
.is-active {
  border: none !important;
}
</style>